<template>
  <el-row>
    <el-col :span="6">
      <el-statistic title="信用账户总余额" :value="creditTotalAmount.toFixed(2)"></el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="fundTotalAmount.toFixed(2)">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            红利账户总余额
          </div>
        </template>
        <template #suffix></template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="总充值金额" :value="rechargeTotal.toFixed(2)" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="总提现金额" :value="withdrawalTotal.toFixed(2)"></el-statistic>
    </el-col>
  </el-row>
  <el-divider direction="horizontal" />
  <el-row :gutter="20">
    <el-col :span="11">
      近七日充值
      <el-table :data="rechargeTableList" border style="width: 100%">
        <el-table-column prop="creatTime" label="日期" width="180" />
        <el-table-column prop="amount" label="金額">
          <template #default="scope">
            {{ scope.row.amount/100 }}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="2">
      <el-divider direction="vertical" />
    </el-col>
    <el-col :span="11">
      近七日提现
      <el-table :data="withdrawalTableList" border style="width: 100%">
        <el-table-column prop="creatDate" label="日期" width="180" />
        <el-table-column prop="totalAmount" label="金額">
          <template #default="scope">
            {{ scope.row.totalAmount/100 }}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { statAccountBase } from '@/api/stat';

const fundTotalAmount = ref(0);
const creditTotalAmount = ref(0);
const rechargeTotal = ref(0);
const withdrawalTotal = ref(0);
const rechargeTableList = ref([]);
const withdrawalTableList = ref([]);

const getStat = () => {
  statAccountBase().then(res=>{
    console.log(res)
    fundTotalAmount.value = res.data["FUND"]/100;
    creditTotalAmount.value = res.data["CREDIT"]/100;
    rechargeTotal.value = res.data["rechargeTotal"]/100;
    withdrawalTotal.value = res.data["withdrawalTotal"]/100;
    rechargeTableList.value = res.data["rechargeDailyList"];
    withdrawalTableList.value = res.data["withdrawalDailyList"];
  })
}


onMounted(() => {
  getStat();
});
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
